<template>
  <q-page padding>
    <div class="q-pa-md">
      <q-table
        title="用户管理"
        :rows="filteredRows"
        :columns="columns"
        row-key="id"
        :filter="filter"
        flat
        bordered
        :grid="$q.screen.lt.md"
      >
        <template v-slot:top>
          <q-btn color="primary" label="新增用户" @click="openAddDialog" />
          <q-space />
          <q-input borderless dense debounce="300" v-model="filter" placeholder="搜索">
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>
        </template>

        <template v-slot:item="props">
          <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
            <q-card flat bordered>
              <q-card-section class="text-center">
                <strong>{{ props.row.name }}</strong>
              </q-card-section>
              <q-separator />
              <q-card-section>
                <div class="flex justify-between">
                  <span>电话:</span>
                  <span>{{ props.row.phone }}</span>
                </div>
                <div class="flex justify-between">
                  <span>状态:</span>
                  <q-badge :color="props.row.status === '正常' ? 'positive' : 'negative'">
                    {{ props.row.status }}
                  </q-badge>
                </div>
                <div class="text-grey-8 q-mt-sm">
                  地址: {{ props.row.address }}
                </div>
              </q-card-section>
              <q-card-actions align="right">
                <q-btn dense round flat icon="edit" @click="openEditDialog(props.row)"></q-btn>
                <q-btn dense round flat icon="delete" @click="confirmDelete(props.row)"></q-btn>
              </q-card-actions>
            </q-card>
          </div>
        </template>

        <template v-slot:body-cell-status="props">
          <q-td :props="props">
            <q-badge :color="props.row.status === '正常' ? 'positive' : 'negative'">
              {{ props.row.status }}
            </q-badge>
          </q-td>
        </template>

        <template v-slot:body-cell-actions="props">
          <q-td :props="props">
            <q-btn dense round flat icon="edit" @click="openEditDialog(props.row)"></q-btn>
            <q-btn dense round flat icon="delete" @click="confirmDelete(props.row)"></q-btn>
          </q-td>
        </template>
      </q-table>
    </div>

    <!-- Add/Edit Dialog -->
    <q-dialog v-model="dialogVisible" persistent>
      <q-card style="min-width: 350px">
        <q-card-section>
          <div class="text-h6">{{ isEditMode ? '编辑用户' : '新增用户' }}</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <q-input dense v-model="formData.name" label="用户姓名" autofocus />
          <q-input dense v-model="formData.phone" label="电话" />
          <q-input dense v-model="formData.address" label="地址" />
          <q-input dense v-model="formData.id_card" label="身份证" />
          <q-select dense v-model="formData.status" :options="['正常', '禁用']" label="用户状态" />
        </q-card-section>

        <q-card-actions align="right" class="text-primary">
          <q-btn flat label="取消" v-close-popup />
          <q-btn flat :label="isEditMode ? '保存' : '新增'" @click="saveItem" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script setup>
import { useCrud } from '../composables/useCrud';
import mockUsers from '../assets/mock-users.json';

// 1. Define page-specific configuration
const columns = [
  { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: true },
  { name: 'name', label: '用户姓名', align: 'left', field: 'name', sortable: true },
  { name: 'phone', label: '电话', align: 'left', field: 'phone' },
  { name: 'address', label: '地址', align: 'left', field: 'address' },
  {
    name: 'registration_date',
    label: '注册日期时间',
    align: 'left',
    field: 'registration_date',
    sortable: true,
    format: (val) => new Date(val).toLocaleString(),
  },
  { name: 'id_card', label: '身份证', align: 'left', field: 'id_card' },
  { name: 'status', label: '用户状态', align: 'center', field: 'status', sortable: true },
  { name: 'actions', label: '操作', align: 'center' },
];

const userFactory = () => ({
  name: '',
  phone: '',
  address: '',
  id_card: '',
  status: '正常',
  registration_date: '' // For auto-populating creation date
});

// 2. Use the composable
const {
  rows,
  filter,
  dialogVisible,
  isEditMode,
  formData,
  filteredRows,
  openAddDialog,
  openEditDialog,
  saveItem,
  confirmDelete,
} = useCrud({
  initialRows: mockUsers,
  itemFactory: userFactory,
  itemName: '用户',
});

</script>